<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>气象站</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">

    <script src="js/highcharts.js"></script>
    <script src="js/modules/exporting.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>-->
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/moment.min.js"></script>
    <script type="text/javascript" src="js/pub.js" ></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        var btn_index = 1;
        var d_id = 1;
        var ls = [];
        $(function () {
            $("#dt").datetimebox("setValue", moment().format("YYYY-MM-DD HH:mm:00"));
            $.get("indexII.json", function(data){
                ls = eval(data);
            })
            
            $("#sel").change(function () {
                chart_ref();
            });
            $("#sel2").change(function () {
                chart_ref();
            });
            btn_click(5);
        });

        function show_chart(lab, dat, tit, id, unit) {
            
            var opt = {
                chart: {
                    renderTo: "c" + id,
                    type: 'line',
                    zoomType: 'x'
                },
                title: {
                    text: tit, // '树莓派气象站',
                    x: -20 //center
                },
                colors: ['#EE7600', '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
                subtitle: {
                    text: 'w_p_ <?php echo date("Y-m-d H:i:s") ?>',
                    x: -20
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories: lab,
                    tickInterval: Math.round(lab.length / 10) // 10
                },
                yAxis: {
                    title: {
                        text: tit // 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: unit // '°C'
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function (event) {
                                //$("#result").html("<b>Result : index = "+event.point.x+" , series = "+this.name + ', x = '+event.point.category+' ,y = '+event.point.y+"</b>");
                                //alert('index = '+ event.point.x+ 'x = '+event.point.category+' ,y = '+event.point.y);
                            }
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: tit, //'ds12b80温度',
                    //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    data: dat
                }]
            }
            dataChart = new Highcharts.Chart(opt);
        }

        function btn_t(i) {
            if (i == 99) {
                var dt2 = new moment();
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));                
            } else {            
                var t_add = $("#sel2").find("option:selected").val();
                var dt1 = $("#dt").datetimebox("getValue");
                var dt2 = new moment(dt1);
                var i_t = i * Number(t_add);
                dt2 = dt2.add(i_t, "hours");
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));
            }
            chart_ref();
        }

        function btn_click(i) {
            btn_index = Number(i);
            chart_ref();
        }
        function chart_ref() {
            //$("#down").empty();
            //var id = $("#sel").find("option:selected").val();
            var dt = $("#dt").datetimebox("getValue");
            //d_id = id;
            //for (i = 1; i <= 8; i++){
            id = d_id;
            if(ls.length == 0) return;
            var key  = ls[id - 1].key;
            var tit  = ls[id - 1].caption;
            var mac  = ls[id - 1].mac;
            var unit = ls[id - 1].unit;
            //log(ls);
            log(key + ", " + tit + ", " + mac + ", " + unit);
            key = mac == '' ? key : key + '-' + mac;
            $.get("main.php", {cmd: "getdata", key: key, t: btn_index, id: id, dt: dt, id_temp: Math.random()}, function (data) {
                data = eval("(" + data + ")");
                if (data.error.length > 0)
                    //alert(data.error);
                    log(data.error);
                //$("#down").attr("href", data.f);
                //$("#down").append("下载数据：" + data.f);
                show_chart(data.lab, data.dat, tit, id, unit);
            })
            //alert(i);
            //Sleep(500);
            //}

            if (d_id < 10) {
                d_id++;
                setTimeout("chart_ref()", 400);
            }
            else {
                d_id = 1;
            }
        }
        
        function btn_click_sign(){
            window.location.href = "index.php";
        }        
    </script>
</head>
<body>
<div>
    <!--<select id="sel">
        <option value="1">1.ds18b20</option>
        <option value="2">2.dht11_humi</option>
        <option value="3">3.dht11_temp</option>
        <option value="4">4.bmp180_p</option>
        <option value="5">5.bh1750</option>
        <option value="6">6.dht11_2_t</option>
        <option value="7">7.dht11_2_h</option>
        <option value="8">8.bmp180_t</option>
    </select>-->
    <input id="dt" type="text" class="easyui-datetimebox">
    <select id="sel2">
        <option value="1">1h</option>
        <option value="3">3h</option>
        <option value="6">6h</option>
        <option value="12">12h</option>
        <option value="24">1d</option>
        <option value="72">3d</option>
        <option value="168">1w</option>
    </select>
    <input type="button" value="now" onclick="btn_t(99)">
    <input type="button" value="<-" onclick="btn_t(-1)">
    <input type="button" value="->" onclick="btn_t(1)">
    <input type="button" value="1h" onclick="btn_click(1)">
    <input type="button" value="3h" onclick="btn_click(2)">
    <input type="button" value="6h" onclick="btn_click(3)">
    <input type="button" value="12h" onclick="btn_click(4)">
    <input type="button" value="1d" onclick="btn_click(5)">
    <input type="button" value="3d" onclick="btn_click(6)">
    <input type="button" value="1w" onclick="btn_click(7)">
    <input type="button" value="1m" onclick="btn_click(8)">
    <input type="button" value="all" onclick="btn_click(9)">
    <!--<input type="button" value="单图表显示" onclick="btn_click_sign()">-->
</div>
<div id="c1" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c2" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c3" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c4" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c5" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c6" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c7" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c8" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c9" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div id="c10" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
<div style="font-size:small; ">
    <br>

    <div style="color:#8E8E8E"> 开发平台: raspberry+nginx+php
        &nbsp;&nbsp;&nbsp;&nbsp;
        mail: 287378376@qq.com
    </div>
</div>
</body>
</html>
